<template>
  <div id="mycard">
    <!-- 使用van-list -->
    <div class="mycard" v-if="dataLength != 0">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="listRoll"
        :offset="offset"
        :immediate-check="isCheck"
      >
        <div v-for="(item, index) in listdata" :key="index">
          <div class="card-box">
            <p class="name">{{ item.bank_name }}</p>
            <p class="name">{{ item.bank_number }}</p>
            <span v-show="lang == 'zh'" @click="delCard(item.id)" class="del"
              >删除</span
            >
            <span
              v-show="lang == 'en'"
              @click="delCard(item.id)"
              class="del en-del"
              >delete</span
            >
          </div>
        </div>
      </van-list>
    </div>
    <div class="zanwubox" v-if="dataLength == 0">
      <img
        src="http://img.zuimeng.net.cn/search/zanwuxiangguancangpin@2x.png"
        alt="暂无银行卡"
      />
      <p class="zanwu" v-show="lang == 'zh'">暂无添加银行卡~</p>
      <p class="zanwu" v-show="lang == 'en'">No bank card added yet~</p>
    </div>
    <div class="addnew" v-show="lang == 'zh'" @click="gotoAdd">添加银行卡</div>
    <div class="addnew" v-show="lang == 'en'" @click="gotoAdd">
      add&nbsp;new&nbsp;card
    </div>
  </div>
</template>
<script>
import { Toast, List, Dialog } from "vant";
import { getcardList, postDelCard } from "@/api/my/card";
export default {
  name: "mycard",
  //声明组件
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      lang: "zh",
      pageIndex: 1, //分页页数
      pageSize: 10, //分页条数
      userId: 0, //用户ID
      offset: 50,
      listdata: [], //列表数据
      loading: false, //是否正在加载
      finished: false, //是否加载完整
      isCheck: false, //是否一开始检查滚动
      dataLength: 0, //数据listData长度
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获取用户ID
    this.getUserId();
    //语言环境
    this.getLang();
    //获取银行卡列表
    this.getCardList();
  },
  //监听
  watch: {},
  //计算属性
  computed: {},
  //
  methods: {
    //获取用户ID
    getUserId() {
      if (this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
      } else {
        //获取缓存内的用户ID
        this.userId = window.localStorage.getItem("userId");
      }
    },
    //获取语言环境
    getLang() {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
      }
    },
    //滚动加载数据
    listRoll() {
      let _this = this;
      _this.pageIndex++;
      _this.getCardList();
    },
    //获取我的银行卡列表
    getCardList() {
      getcardList(this.userId, this.lang).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            var list = res.data;
            this.listdata = this.listdata.concat(list);
            console.log(this.listdata, "listdata");
            var x = "*";
            for (let i = 0; i < this.listdata.length; i++) {
              let y = "";
              for (
                let j = 0;
                j < this.listdata[i].bank_number.length - 6;
                j++
              ) {
                y += x;
              }
              console.log(
                String(this.listdata[i].bank_number).substring(
                  this.listdata[i].bank_number.length - 3,
                  this.listdata[i].bank_number.length
                )
              );
              console.log(String(this.listdata[i].bank_number).substring(0, 3));
              this.listdata[i].bank_number =
                String(this.listdata[i].bank_number).substring(0, 3) +
                y +
                String(this.listdata[i].bank_number).substring(
                  this.listdata[i].bank_number.length - 3,
                  this.listdata[i].bank_number.length
                );
            }

            //console.log(this.listdata.bank_number)
            this.loading = false;
          } else {
            this.finished = true;
            this.loading = false;
          }
          if (this.pageIndex == 1 && res.data.length < this.pageSize) {
            this.finished = true;
            this.loading = false;
          }
          this.dataLength = this.listdata.length;
          console.log(this.listdata, this.dataLength);
        } else {
          Toast(res.msg);
        }
      });
    },
    //删除银行卡
    delCard(id) {
      var message = "";
      var confirm = "确认";
      var cancel = "删除";
      if (this.lang == "zh") {
        message = "确定将该银行卡永久删除？";
      } else {
        message = "Are you sure you want to permanently delete this card?";
        confirm = "confirm";
        cancel = "cancel";
      }
      Dialog.confirm({
        title: "",
        message: message,
        confirmButtonText: confirm,
        cancelButtonText: cancel,
      })
        .then(() => {
          // on confirm
          postDelCard(id, this.lang).then((res) => {
            if (res.code == 200) {
              //获取银行卡列表
              this.listdata = [];
              this.getCardList();
            } else {
              Toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //跳转到添加银行卡
    gotoAdd() {
      var title = "";
      let para = {};
      if (this.lang == "zh") title = "添加银行卡";
      else title = "Add Card";
      para.title = title;
      para.url = "/addcard?userId=" + this.userId + "&lang=" + this.lang;
      this.interaction.hLink(para);
    },
  },
};
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
#mycard{
    height :100%;
    background-color :#fff;
}
.mycard{
    width :100%;
    padding:.266667rem;
    padding-bottom: 1.773333rem;

    .card-box{
        width :100%;
        height :2.133333rem;
        background :url("http://img.zuimeng.net.cn/my/beijing_yinhangka@2x.png") no-repeat;
        padding :.453333rem .4rem;
        margin-bottom :.213333rem;
        position :relative;
        .name{
            background-color :rgba(0,0,0,0,0);
            height :.56rem;
            line-height :.56rem;
            font-family:PingFangSC-Medium;
            font-size:.4rem;
            color:#494949;
            letter-spacing:.0112rem;
            text-align:left;
        }
        .del{
            background-color :rgba(0,0,0,0,0);
            position :absolute;
            height :.453333rem;
            top:50%;
            right :.4rem;
            margin-top :-.24rem;
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#eb3148;
            letter-spacing:.004533rem;
            text-align:right;
        }
        .en-del{
            margin-top :0;
        }
    }
}
.zanwubox{
        width :100%;
        height:100%;
        text-align :center;
        padding-top :4.666667rem;
        img{
            width :3.226667rem;
            height :3.226667rem;
            margin :0 auto;
            vertical-align :middle;
        }
        .zanwu{
            margin-top :.4rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#a2a2a2;
            letter-spacing:.0048rem;
            text-align:center;
        }
    }
.addnew{
        width :100%;
        height :1.173333rem;
        background:#cb9c57;
        text-align :center;
        line-height :1.173333rem;
        position :fixed;
        bottom :0;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.0056rem;
        text-align:center;
    }
</style>
